<script setup lang="ts">
  defineProps<{
    active: boolean
  }>()

  const emits = defineEmits(['click'])
</script>

<template>
  <view class="prize-tab" :class="{ active }" @click="() => emits('click')">
    <text class="tab-label">
      <slot />
    </text>
  </view>
</template>

<style scoped>
  .prize-tab {
    /* padding: 1px; */
	width: 132rpx;
	height: 44rpx;
	line-height: 44rpx;
    /* border-radius: 23px; */
    background-color: transparent;
    position: relative;
    /* background-image: url('./bg-inactive.png'); */
    background-size: 100%;
    background-repeat: no-repeat;
	font-size: 28rpx;
  }
  .prize-tab.active {
    background-image: url('./bg-active.png');
  }
  .prize-tab .tab-label {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    color: white;
  }
  .prize-tab.active .tab-label {
	  color: rgba(255, 221, 134, 1);
  }
</style>
